

<template>
  <el-container style="background: #545c64;">
      <el-header>
        <el-row>
          <el-col :span="20">
            <h1>前端工具函数收集</h1>
          </el-col>
          <el-col :span="2">
            <el-button size="small" @click="copy()">复制</el-button>
          </el-col>
          <el-col :span="2">
            <el-button size="small" type="primary" @click="download()">下载</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px" style="background: #545c64;">
          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
            text-color="#fff">
            <el-menu-item v-for="(e, i) in list" :index="e" :key="i" @click="select">
              <span> {{ getCoreNames(e) }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <highlightjs language='javascript' :code="code" />
        </el-main>
      </el-container>
    </el-container> 
</template>
<script >
var map = {
  arr: "数组",
  browser: "浏览器",
  check: "检查",
  color: "颜色",
  file: "文件处理",
  format: "一些格式化",
  http: "网络",
  json: "JSON",
  math: "Math 数学运算",
  regular: "正则",
  string: "字符相关",
  time: "时间日期",
  tree:"树型数据操作",
  type: "类型判断",
  value: "数值相关",
}
export default {
  data() {
    return {
      list: [],
      code: ''
    }
  },
  mounted() {
    var self = this
    setTimeout(() => {
      self.list = Object.keys(core)
      self.code = self.joinCode(core[self.list[0]])
    }, 500)
  },
  methods: {
    joinCode(obj) {
      return Object.keys(obj).map(e => util[e].toString()).join(",\n\n")
    },
    getCoreNames(v) {
      return map[v]
    },
    select({ index }) {
      this.code = this.joinCode(core[index])
    },
    copy() {
      util.copy(this.joinCode(util))
    },
    download() {
      util.download(`util = { \n ${this.joinCode(util)} \n } `, 'util.js')
    },
  }
}
</script>
<style></style>